<script setup>
import { ref, onMounted } from "vue"
import { getUnsubmitHomeworkAPI, getSubmittedHomeworkAPI } from "@/api/student"
import { ElMessage } from "element-plus"
import dayjs from "dayjs"
// 待完成作业数据
const unsubmitHomework = ref([]);
const homeworkList = ref([]); // 待完成作业列表
const getUnsubmitHomework = async () => {
    try {
        const { data } = await getUnsubmitHomeworkAPI()
        if (data.code === 200) {
            unsubmitHomework.value = data.data
            homeworkList.value = unsubmitHomework.value.map(item => ({
                name: item.title,
                deadline: item.dueDate,
                status: '待完成'
            }))
        } else {
            ElMessage.error(data.msg || "获取待完成作业失败")
        }
    } catch (error) {
        console.error("获取待完成作业失败:", error)
        ElMessage.error("获取待完成作业失败")
    }
}
const formatTimestamp = (timestamp) => {
   if (!timestamp) return '';
  return dayjs(timestamp).format('YYYY-MM-DD HH:mm')
}
// 已提交作业数据
const submittedHomework = ref([]);
const getSubmittedHomework = async () => {
    try {
        const { data } = await getSubmittedHomeworkAPI()
        if (data.code === 200) {
            submittedHomework.value = data.data.map(item => ({
                title: item.title,
                submitDate: item.submitDate,
                status: '已提交'
            }))
        } else {
            ElMessage.error(data.msg || "获取已提交作业失败")
        }
    } catch (error) {
        console.error("获取已提交作业失败:", error)
        ElMessage.error("获取已提交作业失败")
    }
}

onMounted(() => {
    getUnsubmitHomework()
    getSubmittedHomework() // 获取已提交作业数据
})

// 模拟通知数据
const notifications = ref([
    { title: "考试安排", date: "2025-05-01", description: "期中考试时间：2025年5月20日" },
    { title: "作业提交提醒", date: "2025-05-02", description: "请按时提交数学作业" },
    { title: "社团活动", date: "2025-05-03", description: "下周四有社团活动，地点：教室302" },
]);

// 快捷操作
const quickActions = ref([
    { label: "提交作业", action: () => alert("跳转到提交作业页面") },
    { label: "查看反馈", action: () => alert("跳转到查看反馈页面") },
]);
</script>

<template>
    <div class="student-home">
        <el-row :gutter="20">
            <el-col :span="12">
                <!-- 待完成作业卡片 -->
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>待完成作业</span>
                        </div>
                    </template>
                    <div>
                        <!-- 待完成作业列表 -->
                        <el-list v-if="homeworkList.length > 0">
                            <el-list-item v-for="(item, index) in homeworkList" :key="index">
                                <el-row :gutter="20">
                                    <el-col :span="16" style="display: flex; align-items: center; gap:50px;">
                                        <span>{{ item.name }}</span>
                                        <div class="deadline">截止日期：{{ item.deadline }}</div>
                                    </el-col>
                                    <el-col :span="8" class="status-column">
                                        <el-tag type="danger" v-if="item.status === '待完成'">{{ item.status }}</el-tag>
                                    </el-col>
                                </el-row>
                            </el-list-item>
                        </el-list>
                        <p v-else>暂无待完成作业</p>
                    </div>
                </el-card>

                <!-- 最近通知卡片 -->
                <el-card class="box-card" style="margin-top: 20px;">
                    <template #header>
                        <div class="card-header">
                            <span>最近通知</span>
                        </div>
                    </template>
                    <div>
                        <!-- 最近通知列表 -->
                        <el-list v-if="notifications.length > 0">
                            <el-list-item v-for="(notification, index) in notifications" :key="index">
                                <el-row :gutter="20">
                                    <el-col :span="18">
                                        <strong>{{ notification.title }}</strong>
                                        <div class="notification-date">{{ notification.date }}</div>
                                        <div class="notification-desc">{{ notification.description }}</div>
                                    </el-col>
                                </el-row>
                            </el-list-item>
                        </el-list>
                        <p v-else>暂无新通知</p>
                    </div>
                </el-card>
            </el-col>

            <el-col :span="12">
                <!-- 已提交作业卡片 -->
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>已提交作业</span>
                        </div>
                    </template>
                    <div>
                        <el-list v-if="submittedHomework.length > 0">
                            <el-list-item v-for="(item, index) in submittedHomework" :key="index">
                                <el-row :gutter="20">
                                    <el-col :span="8" style="display: flex; align-items: center; gap:50px;">
                                        <span>{{ item.title }}</span>
                                    </el-col>
                                    <el-col :span="8" style="display: flex; align-items: center; gap:50px;">
                                        <div class="deadline">提交日期：{{ formatTimestamp(item.submitDate) }}</div>
                                    </el-col>
                                    <el-col :span="8" class="status-column">
                                        <el-tag type="success" v-if="item.status === '已提交'">{{ item.status }}</el-tag>
                                    </el-col>
                                </el-row>
                            </el-list-item>
                        </el-list>
                        <p v-else>暂无已提交作业</p>
                    </div>
                </el-card>

                <!-- 日历/时间线卡片 -->
                <el-card class="box-card" style="margin-top: 20px;">
                    <template #header>
                        <div class="card-header">
                            <span>日历/时间线</span>
                        </div>
                    </template>
                    <div>
                        <el-timeline>
                            <el-timeline-item v-for="(item, index) in homeworkList" :key="index" :timestamp="item.deadline">
                                <div>{{ item.name }} - 截止日期</div>
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<style lang="scss" scoped>
.student-home {
    padding: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
}

.box-card {
    width: 100%;
    margin-bottom: 20px;
}

.deadline {
    font-size: 14px;
    color: #888;
}

.status-column {
    display: flex;
    justify-content: flex-end;
}

.notification-date {
    font-size: 12px;
    color: #888;
}

.notification-desc {
    font-size: 14px;
    color: #333;
}

.el-button {
    width: 100%;
}

.el-timeline-item {
    margin-bottom: 10px;
}
</style>
